<template>
  <div>
    <div class="Assembly" v-for="(item, index) in data" :key="index">
      <a @click="goPage(item.pathUrl)">
        <div class="msg">
          <img :src="item.imgUrl" />
          <div>{{ item.title }}</div>
        </div>
        <div class="img-box">
          <img src="../assets/imgs/wode_icon_more.png" alt="" />
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  methods:{
    goPage(url){
      if (!this.$store.state.isBind) {
        this.$store.commit("showBandPhone", true);
        this.$toast("请先绑定手机");
        return;
      }
      this.$router.push(url)
    }
  }
};
</script>

<style scoped>
.Assembly {
  margin: 0 25px 26px 25px;
  height: 176px;
  color: #333333;
  background: #fff;
  border-radius: 10px;
  color: #bbb;
}
.img-box{
  width: 14px; height: 24px
}
a {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 46px 0 27px;
}
a .msg img {
  width: 60px;
  height: 60px;
  margin-right: 28px;
}
a .msg {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}
</style>